<template>
  <div class="goods_list">
    <div class="filter">
      <el-card>
        <div class="Title jsb">
          <div class="left aic jc">
            <el-icon color="#333" size="12"><search /></el-icon>
            <div class="filte">筛选搜索</div>
          </div>
          <div class="right" @click="queryData">开始查询</div>
        </div>
      </el-card>
      <el-card>
        <div class="condition aic">
          <div class="item aic">
            <span>商品名称: </span>
            <el-input v-model="filtData.good_name" placeholder="输入商品名称" />
          </div>
          <div class="item aic">
            <span>发布时间: </span>
            <el-date-picker
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :disabled-date="disabledDate"
              v-model="filtData.isSure_time"
              type="date"
              placeholder="请选择查询的时间"
            >
            </el-date-picker>
          </div>
          <div class="item aic">
            <span>商品分类: </span>
            <el-select
              v-model="filtData.goods_category"
              placeholder="请选择商品分类"
              @change="handleChange"
            >
              <el-option
                v-for="item in goods_categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="item aic">
            <span>商品品牌: </span>
            <el-select
              v-model="filtData.goods_bind"
              placeholder="请选择商品品牌"
              @change="handleChange"
            >
              <el-option
                v-for="item in goods_brandList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="item aic">
            <span>上架状态: </span>
            <el-select
              v-model="filtData.putaway_status"
              placeholder="请选择商品的上架状态"
            >
              <el-option
                v-for="item in putawayStatus"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="item aic">
            <span>审核状态:</span>
            <el-select
              v-model="filtData.check_status"
              placeholder="请选择商品审核状态"
            >
              <el-option
                v-for="item in checkStatus"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </el-card>
    </div>

    <div class="tableList">
      <el-card>
        <div class="tableTile aic">
          <el-icon color="#333" size="20"><Menu /></el-icon>
          <span>数据列表</span>
        </div>
        <el-table
          :data="getGoodsList"
          border
          @selection-change="handleSelectionChange"
          ref="multipleTable"
          :header-row-style="{ color: '#333', fontSize: '16px' }"
        >
          <el-table-column type="selection" width="30" align="center" />
          <el-table-column prop="id" label="商品id" width="80" align="center" />
          <el-table-column
            prop="series"
            label="编号"
            width="180"
            align="center"
          />
          <el-table-column prop="price" label="价格 / 元" align="center" />
          <el-table-column prop="title" label="标题" align="center" />
          <el-table-column
            prop="goods_image"
            label="主图"
            align="center"
            width="100px"
          >
            <template #default="scope">
              <img :src="scope.row.goods_image" style="width: 80%" />
            </template>
          </el-table-column>
          <el-table-column prop="found_time" label="创建时间" align="center" />
          <el-table-column prop="sure_time" label="发布时间" align="center" />
          <el-table-column
            prop="putaway_status"
            label="商品状态"
            align="center"
            width="180"
          >
            <template #default="scope">
              <el-switch
                :model-value="scope.row.putaway_status == 0"
                active-text="未上架"
                inactive-text="上架"
                active-color="#f73137"
                inactive-color="#409EFF"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="check_status" label="标签" align="center">
            <template #default="scope">
              {{
                scope.row.check_status == 0
                  ? "审核中"
                  : scope.row.check_status == 1
                  ? "已通过"
                  : "不通过"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="market" label="销量 / 单" align="center" />
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button
                type="text"
                size="small"
                @click="handleEdit(scope.$index, scope.row)"
                :disabled="scope.row.check_status == 2"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
          <template #empty>
            <el-empty :image-size="200" description="暂无商品"> </el-empty>
          </template>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { get, post } from "@/api/api.js";
import { Search, Menu } from "@element-plus/icons";
import { useRouter } from "vue-router";
const router = useRouter();
const getGoodsList = ref([]); // 商品列表
const goods_categoryList = ref([]); // 商品分类列表
const goods_brandList = ref([]); // 商品品牌列表
// 禁用当天往后的天数选择
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
// 选中后的数据
const multipleSelection = ref([]);
// 更新下 dom
const multipleTable = ref("");
// 上架状态
const putawayStatus = ref([
  { id: 1, label: "上架" },
  { id: 0, label: "未上架" },
]);
// 审核状态
const checkStatus = ref([
  { id: 0, label: "待审核" },
  { id: 1, label: "不通过" },
  { id: 2, label: "通过" },
]);

// 筛选后的数据
const filtData = reactive({
  good_name: "", // 商品名称
  isSure_time: "", // 发布时间
  goods_category: "", // 商品分类
  goods_bind: "", // 商品品牌
  putaway_status: "", // 上架状态
  check_status: "", // 审核状态
});
const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTable.vaule.toggleRowSelection(row);
    });
  } else {
    multipleTable.vaule.clearSelection();
  }
};
// 选中的列表
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

// 分类改变之后 获取品牌数据
const handleChange = async () => {
  let res = await get("goods/brand", {
    id: filtData.goods_category,
  });
  if (res.code == 0) {
    goods_brandList.value = res.result;
  }
};
// 获取商品列表
let GoodsList = async () => {
  const res = await get("/goods/getGoods");
  if (res.code == 0) {
    let { data, total } = res;
    getGoodsList.value = data.data;
    // 总数量
  }
};
onMounted(async () => {
  // 获取商品列表
  GoodsList();

  // 获取商品分类
  let result = await get("goods/category");
  if (result.code == 0) {
    goods_categoryList.value = result.result;
  }
});

// 点击开始查询
const queryData = () => {
  // GoodsList()
};

// 点击编辑
const handleEdit = () => {
  router.push("/good_edit");
};
// 点击删除
const handleDelete = () => {};
</script>

<style scoped lang="scss">
$color: #409eff;
@import url("../../globalStyle/flex.css");
@import url("../../globalStyle/color.scss");
.tableTile {
  @include bdd(1px, #eee);
  padding: 6px 10px;
  margin: 10px 0;
  // box-shadow: 0px 0 10px rgba(0, 0, 0, 0.3);
  @include bdt(1px, #eee);
  span {
    margin-left: 10px;
  }
}
.filter {
  .Title {
    height: 10px;
  }
  .left {
    .filte {
      margin-left: 10px;
    }
  }
  .right {
    @include bg($color);
    padding: 6px 10px;
    border-radius: 6px;
    @include c(#fff);
    @include fs(14px);
  }

  .condition {
    margin: 20px 0;
    flex-wrap: wrap;
    .item {
      // flex:1;
      @include w(30%);
      margin-left: 20px;
      margin-bottom: 30px;
      span {
        display: block;
        @include w(70px);
      }
      //   .el-select {
      //     width: 100%;
      //     flex:1;
      //   }
      //  >>> .el-input.el-input--prefix{

      //    flex:1;
      //    padding:0;
      //  }
      :nth-child(2) {
        flex: 1;
      }
    }
  }
}
</style>
